@tailwind base;
@tailwind components;
@tailwind utilities;

html {
  @apply bg-surface-200 accent-primary scroll-smooth;
  /* background-image:
      radial-gradient(at 0% 0%, hsl(var(--color-secondary) / 0.33) 0px, transparent 50%),
      radial-gradient(at 98% 1%, hsl(var(--color-primary) / 0.33) 0px, transparent 50%); */
}

nav h1 {
  @apply py-2 pl-4 mt-4 text-sm text-surface-content font-bold bg-surface-200 border-t border-b;
}

nav h2 {
  @apply pt-4 pb-2 pl-4 text-xs text-surface-content font-bold;
}

main :is(h1, h2, h3):not(.prose *, .related *, .ApiDocs *) {
  scroll-margin-top: calc(var(--headerHeight) + 148px); /* app header + docs header */
}

main h1:not(.prose *, .related *, .ApiDocs *) {
  @apply text-xl font-semibold mt-4 mb-2 border-b pb-1;
}

main h2:not(.prose *, .related *, .ApiDocs *) {
  @apply text-lg font-semibold mt-4 mb-1;
}

main h3:not(.prose *, .related *, .ApiDocs *) {
  @apply text-xs text-surface-content/50 mb-1;
}
main :not(.prose) h2 + h3 {
  @apply -mt-1;
}

main small {
  @apply text-xs text-surface-content/50 inline-block;
}

.TableOfContents small {
  @apply hidden;
}

/* Code/Preview backgrounds */
pre[class*='language-'] {
  @apply bg-surface-content;
}

.dark pre[class*='language-'] {
  @apply bg-surface-300;
}
